<template>
	<view class="content">
		<view class="setTiem">
			<view class="setTiem_l">
				<view>{{startTime}}</view>
				<view>----</view>
				<view>{{endTime}}</view>
			</view>
			<view class="setTiem_r">
				<uni-datetime-picker v-model="single">
					<image class="setTiemImg" src="https://txr001.zthj.net/qingdie/Icon_calendar_outlined%402x.png" mode=""></image>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="textList">
			<view>
				<checkbox-group @change="checkboxChange">
					<view class="uni-list-cell">
						<view class="checkboxBtno">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkall">全选</view>
					</view>
				</checkbox-group>
			</view>
			<view class="checkbox">
				<checkbox-group @change="checkboxChange">
					<view class="uni-list-cell">
						<view class="checkboxBtnt">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkallBox">
							<view>
								<view>用电(KW/H)</view>
								<view>2900</view>
							</view>
							<view>
								<view>数据来源:自主填报</view>
								<view>更新时间:2023.12.23 12:09</view>
							</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="checkboxBtnt">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkallBox">
							<view>
								<view>用水(吨)</view>
								<view>2900</view>
							</view>
							<view>
								<view>数据来源:自主填报</view>
								<view>更新时间:2023.12.23 12:09</view>
							</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="checkboxBtnt">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkallBox">
							<view>
								<view>用煤(10^4NM³)</view>
								<view>2900</view>
							</view>
							<view>
								<view>数据来源:自主填报</view>
								<view>更新时间:2023.12.23 12:09</view>
							</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="checkboxBtnt">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkallBox">
							<view>
								<view>用气(10^4NM³)</view>
								<view>2900</view>
							</view>
							<view>
								<view>数据来源:自主填报</view>
								<view>更新时间:2023.12.23 12:09</view>
							</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="checkboxBtnt">
							<label>
								<checkbox style="transform: scale(0.8)" class="round red"></checkbox>
							</label>
						</view>
						<view class="checkallBox checkboxNoBoder">
							<view>
								<view>用油(10^4NM³)</view>
								<view>2900</view>
							</view>
							<view>
								<view>数据来源:自主填报</view>
								<view>更新时间:2023.12.23 12:09</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view class="setBtn">
			<view class="addkanban verification" @click="handleverificationBtn">
				<view>
					<image src="https://txr001.zthj.net/qingdie/Frame4.png" mode=""></image>
				</view>
				<view @click="handleOpenVerification">&emsp;人工核验&emsp;(提交凭证)</view>
			</view>
			<view class="addkanban Intelligentize">
				<view>
					<image src="https://txr001.zthj.net/qingdie/Frame6.png" mode=""></image>
				</view>
				<view>&emsp;在线核验&emsp;(无需凭证)</view>
			</view>
		</view>
		<view class="aaa"></view>
		<!-- 人工核验-->
		<uni-popup ref="verification" type="center">
			<view class="boardPopup">
				<view>添加看板</view>
				<view></view>
				<view class="artificial">
					<view class="artificialItem">
						<view>
							<view>用电(KW/H)</view>
							<view>2900</view>
						</view>
					</view>
					<view class="uploading">
						<view class="uploadingBasics">
							<view>
								<image src="https://txr001.zthj.net/qingdie/Group7.png" mode=""></image>
							</view>
							<view>上传凭证</view>
						</view>
					</view>
				</view>
				<view class="artificial artificialTop">
					<view class="artificialItem">
						<view>
							<view>用水(吨)</view>
							<view>2900</view>
						</view>
					</view>
					<view class="uploading">
						<view class="uploadingBasics">
							<view>
								<image src="https://txr001.zthj.net/qingdie/Group7.png" mode=""></image>
							</view>
							<view>上传凭证</view>
						</view>
					</view>
				</view>
				<view class="setOpenBtn">
					<view @click="handleCancelArtificial">取消</view>
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTime:"2022-12-01",
				endTime:"2023-12-07",
				single: "2021-04-3",
			}
		},
		onLoad() {
		},
		methods:{
			// 人工核验btn
			handleverificationBtn(){
				this.$refs.verification.open('center')
			},
			// 关闭人工核验弹窗
			handleCancelArtificial(){
				this.$refs.verification.close()
			},
			checkboxChange: function(e) { //监听勾选框变化			
				if (e.target.value.length > 0) {
					this.checked = true  //checked在data中定义
				} else {
					this.checked = false
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped lang="less">
	.aaa{
		height: 10rpx;
	}
	.content{
		width: 750rpx;
		height: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.setTiem{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 30rpx;
		width: 686rpx;
		height: 60rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 0 20rpx;
		.setTiem_l{
			display: flex;
		}
		.setTiem_r{
			width: 32rpx;
			height: 32rpx;
			.setTiemImg{
				display: block;
				width: 100%;
				height: 32rpx;
			}
		}
	}
	.textList{
		width: 686rpx;
		height: auto;
		border-radius: 48rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 40rpx;
	}
	
		/*每个页面公共css */
		/* //设置圆角 */
		/deep/checkbox.round .wx-checkbox-input,
		checkbox.round .uni-checkbox-input {
			border-radius: 100rpx;
			border: 4rpx solid #1FC9AB;
		}
	
		/* //设置背景色 */
		/deep/checkbox.red[checked] .wx-checkbox-input,
		checkbox.red.checked .uni-checkbox-input {
			background-color: #1FC9AB !important;
			border-color: #1FC9AB !important;
			color: #1FC9AB !important;
		}
	
		/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
			content: '\2022';
		}
		/* //元素使用的时候就是使用 round 和 red */
		.uni-list-cell{
			display: flex;
			.checkboxBtno{
				box-sizing: border-box;
				padding-top: 30rpx;
			}
			.checkboxBtnt{
				box-sizing: border-box;
				padding-top: 30rpx;
			}
		}
		/deep/radio::before, checkbox::before {
			font-weight: 700;
		}
		.checkall{
			margin-left: 5rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			color: #333333;
			line-height: 120rpx;
			height: 120rpx;
			box-sizing: border-box;
			padding-left: 10rpx;
			flex:1;
			border-bottom: 2rpx solid #E6E6E6;
		}
		.checkallBox{
			margin-left: 5rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			color: #333333;
			height: 150rpx;
			box-sizing: border-box;
			padding-left: 10rpx;
			flex:1;
			border-bottom: 2rpx solid #E6E6E6;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			>view:nth-child(1){
				margin-top: 30rpx;
				font-family: "PingFang SC";
				>view:nth-child(1){
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					// line-height: 28rpx;
				}
				>view:nth-child(2){
					font-size: 28rpx;
					font-weight: 700;
					color: #333333;
					// line-height: 33rpx;
				}
			}
			>view:nth-child(2){
				margin-top: 20rpx;
				font-size: 20rpx;
				font-family: "PingFang SC";
				font-weight: 400;
				color: #9F9F9F;
			}
		}
		.checkboxNoBoder{
			border: none;
		}
	.setBtn{
		margin-top: 40rpx;
		.addkanban{
			width: 686rpx;
			height: 80rpx;
			background: #24458E;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			>view:nth-child(1){
				width: 32rpx;
				height: 32rpx;
				>image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			>view:nth-child(2){
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: "PingFang SC";
				font-weight: 500;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}
		.verification{
			background-color: #0CB596;
			margin: 30rpx 0;
		}
		.Intelligentize{
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			border: 2rpx solid #0CB596;
			>view:nth-child(2){
				color: #0CB596;
			}
		}
	}
	// 人工核验
	.boardPopup{
		width: 686rpx;
		height: auto;
		background-color: #fff;
		border-radius: 48rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-family: "PingFang SC";
		>view:nth-child(1){
			font-size: 35rpx;
			font-weight: 600;
			color: #333333;
			line-height: 35rpx;
		}
		>view:nth-child(2){
			height: 2rpx;
			background: #D9D9D9;
			margin: 30rpx 0;
		}
		.setOpenBtn{
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				width: 280rpx;
				height: 87rpx;
				line-height: 87rpx;
				text-align: center;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				border: 2rpx solid #999999;
				font-size: 31rpx;
				font-family: "PingFang SC";
				font-weight: 400;
			}
			>view:nth-child(1){
				border: 2rpx solid #999999;
				color: #666666;
			}
			>view:nth-child(2){
				border: none;
				background-color: #24458E;
				color: #fff;
			}
		}
		.artificialTop{
			margin-top: 30rpx;
		}
		.artificial{
			width: 100%;
			height: auto;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid #D9D9D9;
			.artificialItem{
				>view:nth-child(1){
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: "PingFang SC";
					>view{
						font-size: 31rpx;
						font-weight: 500;
						color: #333333;
						line-height: 36rpx;
					}
				}
			}
			.uploading{
				margin-top: 20rpx;
				width: 197rpx;
				height: 197rpx;
				background: #FFFFFF;
				border-radius: 17rpx 17rpx 17rpx 17rpx;
				opacity: 1;
				border: 3rpx solid #808080;
				text-align: center;
				.uploadingBasics{
					>view:nth-child(1){
						margin: 30rpx 0;
						height: 50rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						>image{
							border: 2rpx dashed #ccc;
							display: block;
							width: 50rpx;
							height: 100%;
						}
					}
					>view:nth-child(2){
						font-size: 26rpx;
						font-family: "PingFang SC";
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
	}
</style>